<template>
    <div>
        <div class="header">
            <el-form :model="searchForm" inline>
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名进行查询" v-model="searchForm.account"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAcount">新增</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%;">
            <el-table-column prop="account" label="用户名" />
            <el-table-column prop="level" label="等级" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="updateAccount(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/修改弹框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">
            <el-form :model="accountForm" lable-width="120px">
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                    <el-input placeholder="请输入用户等级" v-model.number="accountForm.level"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <!-- 添加 -->
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
                    <!-- 修改 -->
                    <el-button type="primary" @click="updateAccountHandle" v-else>确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { ref, computed, getCurrentInstance } from 'vue';
import { getDataApi, addAccountApi, deleteAccountApi, updateAccountApi } from '../utils/mockServer/db'

//常量定义
const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
    0: '新增',
    1: '修改'
}

const { proxy: _this } = getCurrentInstance()

//列表数据
const tableData = ref([])
//搜索表单
const searchForm = ref({
    account: ''
})
//新增or修改时的表单
const accountForm = ref({
    account: '',
    level: DEFAULTLEVEL,
    id: 0
})
//新增 修改弹框
const dialogVisible = ref(false)
//弹框类型map
const dialogTypeMap = ref({
    add: 0,
    modify: 1
})
//弹框类型map
const dialogType = ref(dialogTypeMap.value.add)
//弹框标语
const dialogTitle = computed(() => {
    return DIALOGTITLEMAP[dialogType]
})

//请求全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
}
getData()

//搜索操作
const handleSearch = () => {
    getData(searchForm.value.account)
}

const showAddAcount = () => {
    //显示弹框，并切换弹框类型为新增
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.add
}

const addAccount = () => {
    //获得弹框中的数据
    const { account, level } = accountForm.value
    const accountObj = {
        account,
        level
    }
    //调用接口 
    addAccountApi(accountObj)
    _this.$message({
        type: 'success',
        message: '添加成功',
    })
    getData()
    resetAccountDialog()
}
const updateAccount = (row) => {
    //展示弹框并切换弹框内容
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.modify

    //将要修改的内容显示到输入框中
    const { account, level, id } = row
    accountForm.value.account = account
    accountForm.value.level = level
    accountForm.value.id = id
}

const updateAccountHandle = () => {
    updateAccountApi(accountForm.value)
    _this.$message({
        type: 'success',
        message: '添加成功',
    })
    getData()
    resetAccountDialog()
}

const deleteAccount = (row) => {
    _this.$confirm('是否要删除该账号', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteAccountApi(row)
            _this.$message({
                type: 'success',
                message: '删除成功'
            })
            getData()
        }, () => {
            _this.$message({
                type: 'info',
                message: '取消删除'
            })
        })
}


//复位弹框状态以及弹框内form表单状态

const resetAccountDialog = () => {
    dialogVisible.value = false
    accountForm.value.account = ''
    accountForm.value.level = DEFAULTLEVEL
}







</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>